<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="/layouts/default">
<th:block layout:fragment="title">
    数据库列表
</th:block>
<!-- head -->
<th:block layout:fragment="head">
    <!--页面自定义样式-->
    <style>
        /** style */
    </style>
</th:block>
<!-- content -->
<th:block layout:fragment="content">
    <el-row>
        <el-button :disabled="data_group.multipleSelection.length === 0" type="primary" @click="openDialog" plain>
            批量生成代码
        </el-button>
    </el-row>
    <el-table :stripe="true" fixed class="fn-mt10" :data="data_group.list" highlight-current-row border
              @selection-change="onSelectionChange" @cell-dblclick="dblclickTable">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="tableName" label="表名" align="left" min-width="5%" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <i class="el-icon-film"></i>
                <span style="margin-left: 10px">{{ scope.row.tableName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="comments" label="备注" align="left" min-width="15%"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="center" min-width="5%" label="操作" fixed="right">
            <template scope="scope">
                <el-button @click="showColumns(scope.row.tableName,scope.row.comments)" circle  icon="el-icon-edit-outline" type="warning"></el-button>
                <el-button @click="lookTableInfo(scope.row)" circle icon="el-icon-view" type="primary"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新建/编辑弹出框start -->
    <el-dialog title="批量生成代码" :visible.sync="dialogFormVisible" width="50%">
        <el-form label-width="150px" :model="columnForm" ref="columnForm" label-position="left">
            <div class="block">
                <el-timeline>
                    <el-timeline-item timestamp="基础信息" placement="top">
                        <el-card>
                            <el-form-item class="fn-ml20" label="包名" icon="el-icon-search">

                                <el-input  prefix-icon="el-icon-folder"  v-model="columnForm.modelName" placeholder="生成代码的包名。eg:com.chehejia.saos.rb">
                                    <template slot="prepend">com.</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item class="fn-ml20" label="作者：">
                                <el-input prefix-icon="el-icon-user" v-model="columnForm.author"></el-input>
                            </el-form-item>
                            <el-form-item class="fn-ml20" label="前缀：">
                                <el-input placeholder="表名中需要截取的部分,无需截取则不填" v-model="columnForm.prefix"></el-input>
                            </el-form-item>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="DAO层" placement="top">
                        <el-card>
                            <el-form-item class="fn-ml20" label="DAO层包名：">
                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.daoPackage" placeholder="DAO实体类包名"></el-input>
                            </el-form-item>

<!--                            <el-form-item class="fn-ml30" label="entityToPackage：">-->
<!--                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.entityToPackage" placeholder="自定义实体包名"></el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item class="fn-ml30" label="mapperPackage：">-->
<!--                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.mapperPackage" placeholder="mapper包名"></el-input>-->
<!--                            </el-form-item>-->

                            <el-form-item class="fn-ml20" label="entityName：">
                                <el-input prefix-icon="el-icon-document"  v-model="columnForm.entityName" placeholder="DAO实体类名称"></el-input>
                            </el-form-item>

<!--                            <el-form-item class="fn-ml30" label="entityToName：">-->
<!--                                <el-input prefix-icon="el-icon-document" v-model="columnForm.entityToName" placeholder="实体类名称"></el-input>-->
<!--                            </el-form-item>-->

                            <el-form-item class="fn-ml20" label="mapperName">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.mapperName" placeholder="Mapper名称"></el-input>
                            </el-form-item>

                            <el-form-item class="fn-ml20" label="xmlName：">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.xmlName" placeholder="XML命名"></el-input>
                            </el-form-item>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="Service层" placement="top">
                        <el-card>
                            <el-form-item class="fn-ml20" label="SERVICE包名">
                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.servicePackage" placeholder="service包名命名"></el-input>
                            </el-form-item>
<!--                            <el-form-item class="fn-ml30" label="serviceImplPackage：">-->
<!--                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.serviceImplPackage"-->
<!--                                          placeholder="service实现层包名命名"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item class="fn-ml20" label="serviceName：">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.serviceName" placeholder="service接口命名"></el-input>
                            </el-form-item>
                            <el-form-item class="fn-ml20" label="serviceImplName">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.serviceImplName" placeholder="service接口实现命名"></el-input>
                            </el-form-item>
                        </el-card>
                    </el-timeline-item>

<!--                    <el-timeline-item timestamp="WEB层" placement="top" color="#0bbd87">-->
<!--                        <el-card>-->
<!--                            <el-form-item class="fn-ml20" label="WEB层：">-->
<!--                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.controllerPackage" placeholder="web包命名"></el-input>-->
<!--                            </el-form-item>-->
<!--                            <el-form-item class="fn-ml20" label="controllerName：">-->
<!--                                <el-input prefix-icon="el-icon-document" v-model="columnForm.controllerName" placeholder="前端控制器命名"></el-input>-->
<!--                            </el-form-item>-->
<!--                        </el-card>-->
<!--                    </el-timeline-item>-->

                    <el-timeline-item timestamp="API层" placement="top">
                        <el-card>
                            <el-form-item class="fn-ml20" label="API层：">
                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.apiPackage" placeholder="API包命名"></el-input>
                            </el-form-item>
                            <el-form-item class="fn-ml20" label="apiName：">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.apiName" placeholder="API命名"></el-input>
                            </el-form-item>
<!--                            <el-form-item class="fn-ml30" label="apiImplPackage：">-->
<!--                                <el-input prefix-icon="el-icon-folder"  v-model="columnForm.apiImplPackage" placeholder="apiImpl包名"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item class="fn-ml20" label="apiImplName：">
                                <el-input prefix-icon="el-icon-document" v-model="columnForm.apiImplName" placeholder="imapl命名"></el-input>
                            </el-form-item>
                        </el-card>
                    </el-timeline-item>

                </el-timeline>
            </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('columnForm')">确定生成</el-button>
        </div>
    </el-dialog>

<!--    查看表结构-->
    <el-drawer
            :title="drawer_title"
            :visible.sync="tableColumnVisible"
            direction="ttb"
            size="75%">
        <el-table :stripe="true" border fixed
                  :data="gridTableData"
                  highlight-current-row
                  height="550"
                  @selection-change="onSelectionChange">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="colName" label="列名" align="center"
                             :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="colType" label="类型" align="center"
                             :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="comments" label="注释" align="center"
                             :show-overflow-tooltip="true">
                <template scope="scope">
                    {{scope.row.comments}}
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>

</th:block>

<!-- js -->
<th:block layout:fragment="js">
    <!--页面js-->
    <script>
        $UU.init({
            data: {
                loading: false,
                dialogFormVisible: false,
                importFormVisible: false,
                tableColumnVisible:false,
                drawer_title:'',
                gridTableData:[],
                dialogTitle: "",
                search_group: {
                    id: '',
                    dbName: '',
                    url: "",
                    driver: "",
                    username: "",
                    password: "",
                    schema: null,
                    catalog: null,
                    dbType: null
                },
                data_group: {
                    active: 'active',
                    list: [{}, {}, {}],
                    multipleSelection: [],
                    multipleTable: [],
                    //分页
                    pagination: {
                        index: 1, //当前页码
                        size: 10, //每页记录数
                        total: 100 //记录总数
                    }
                },
                form: {},
                columnForm: {
                    id: '',
                    tableName: '',
                    comments: '',
                    remarks: [],
                    dbId: null,
                    prefix: null,
                    checked: true,
                    modelName: 'chehejia',
                    author: 'Auto-generator',
                    entityName: '%s',
                    mapperName: '%sMapper',
                    xmlName: '%sMapper',
                    serviceName: '%sService',
                    serviceImplName: '%sServiceImpl',
                    controllerName: '%sController',
                    apiName: '%sApi',
                    apiImplName: '%sApiImpl',
                    daoPackage: 'dao',
                    entityPackage: 'domain',
                    entityToPackage: 'to',
                    entityDtoPackage: 'dto',
                    entityBoPackage: 'bo',
                    servicePackage: 'service',
                    serviceImplPackage: '', //service.impl,
                    mapperPackage: 'mapper',
                    controllerPackage: 'controller',
                    apiPackage: 'api',
                    apiImplPackage:'', // 最后赋值
                    entityVoPackage: '',
                    entityToName: '%s',
                    entityVoName: '%sVo',
                    entityDtoName: '%sDto',
                    entityBoName: '%sBo',
                }
            },
            created: function () {
                this.search_group.id = $UF.getUrlParam("id");
                console.log("314314321", this.form)
                this.query();
            },
            mounted: function () {
                console.log("vue mounted");
            },
            watch: {
                //监听数据
                "$data.data_group.multipleSelection": function (multipleSelection) {
                    if (multipleSelection.toString().length > 0) {
                        this.search_group.btn_disabled = false;
                    } else {
                        this.search_group.btn_disabled = true;
                    }
                }
            },
            methods: {
                resetForm: function (formName) {
                    var _this = this;
                    _this.$refs[formName].resetFields();
                    _this.search_group.vinListStr = '';
                },
                changeChecked(v){
                    console.log(v);
                },
                onCurrentPageChange: function (index) {
                    var _this = this;
                    _this.data_group.pagination.index = index;
                    this.query();
                },
                onPageSizeChange: function (size) {
                    var _this = this;
                    _this.data_group.pagination.size = size;
                    this.query();
                },
                query: function () {
                    var _this = this;
                    //请求参数
                    var req = _this.search_group;
                    $UU.http.get("/table-list",
                        req
                        , function (response) {
                            console.log("=========>", response);
                            if (response.body.code === 0) {
                                _this.data_group.list = response.body.data;
                            } else {
                                _this.$message.error(response.body.msg);
                            }
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                openDialog: function (type, dbName) {
                    console.log(type,dbName);
                    var _this = this;
                    if (type === 'new') {
                        _this.dialogFormVisible = true;
                        _this.dialogTitle = "新增";
                        _this.form = {
                            id: null,
                            dbName: null,
                            url: "",
                            driver: "",
                            username: "",
                            password: "",
                            schema: null,
                            catalog: null,
                            dbType: null
                        }
                    } else if (type === 'edit') {
                        _this.dialogFormVisible = true;
                        _this.dialogTitle = "编辑";
                        var id = dbName;
                        _this.getById(id);
                    } else if (type === 'delete') {
                        if (_this.data_group.multipleSelection.length === 0) {
                            _this.$message.warning("请选择一条数据！");
                        } else {
                            var ids = '';
                            for (var i = 0; i < _this.data_group.multipleSelection.length; i++) {
                                if (i == 0) {
                                    ids = _this.data_group.multipleSelection[i].id;
                                } else {
                                    ids += "," + _this.data_group.multipleSelection[i].id;
                                }
                            }
                            _this.deleteById(ids);
                        }
                    }
                },
                submitForm: function (formName) {
                    this.batchGenerate();
                },
                onSelectionChange: function (val) {
                    this.data_group.multipleSelection = val;
                },
                testConn: function () {
                    var _this = this;
                    $UU.http.post("/test", _this.form, function (response) {
                        if (response.data.code === 0) {
                            _this.$message.success(response.data.msg);
                        } else {
                            _this.$message.error(response.data.msg);
                        }
                    }, {})
                },
                getById: function (id) {
                    var _this = this;
                    //请求参数
                    var req = {};
                    $UU.http.get("/getByDbName?dbName=" + id,
                        req
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            _this.form = response.data.data;
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                deleteById: function (row) {
                    var _this = this;
                    _this.$confirm('确定操作吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        //请求参数
                        var req = {};
                        $UU.http.get("/delete?dbName=" + row.dbName,
                            req
                            , function (response) {
                                //获取回调数据
                                console.log(response.data);
                                if (response.data.code === 0) {
                                    _this.query();
                                } else {
                                    _this.$message.error(response.data.msg);
                                }
                            });
                    }).catch(function () {
                    });
                },
                setData: function () {
                    var _this = this;
                },
                batchGenerate: function () {
                    let _this = this;
                    _this.columnForm.tableName = _this.data_group.multipleSelection.map(t => t.tableName).join(",");
                    _this.columnForm.apiImplPackage = _this.columnForm.apiPackage+".impl";
                    _this.columnForm.entityVoPackagePackage = _this.columnForm.apiPackage+".vo";
                    _this.columnForm.serviceImplPackage = _this.columnForm.servicePackage+".impl";
                    _this.columnForm.entityBoPackage  = _this.columnForm.servicePackage+".bo";
                    // dao 处理包名
                    if ( _this.columnForm.checked && _this.columnForm.daoPackage != undefined &&  _this.columnForm.daoPackage != null){
                        _this.columnForm.entityPackage = _this.columnForm.daoPackage+"^t^.domain";
                        _this.columnForm.entityDtoPackage = _this.columnForm.daoPackage+"^t^.dto";
                        console.log(_this.columnForm.entityPackage);
                        _this.columnForm.mapperPackage = _this.columnForm.daoPackage+"^t^"+"persistence";
                        _this.columnForm.xmlPackage = _this.columnForm.daoPackage+"^t^"+".persistence.mapper";
                    }else {
                        _this.columnForm.entityPackage = 'domain' ;
                        _this.columnForm.mapperPackage = 'mapper';
                        _this.columnForm.xmlPackage = 'xml';
                    }
                    console.log("=====处理路径========>:", _this.columnForm);
                    window.open($UC.ctxPath + "/batch-generate?jsonStr=" + encodeURIComponent(JSON.stringify(_this.columnForm)) + "&id=" + $UF.getUrlParam("id"));
                },
                save: function () {
                    var _this = this;
                    console.info(_this.form);
                    $UU.http.post("/save",
                        _this.form
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            if (response.data.code === 0) {
                                _this.$message.success(response.data.msg);
                                _this.dialogFormVisible = false;
                                _this.query();
                            } else {
                                _this.$message.error(response.data.msg);
                            }
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                update: function () {
                    var _this = this;
                    _this.setData();
                    $UU.http.put("/edit",
                        _this.form
                        , function (response) {
                            //获取回调数据
                            console.log(response.data);
                            if (response.data.code === 0) {
                                _this.$message.success(response.data.msg);
                                _this.dialogFormVisible = false;
                                _this.query();
                            } else {
                                _this.$message.error(response.data.msg);
                            }
                        }, {
                            requestBody: true,
                            before: function () {
                                _this.btn_disabled = true;
                            },
                            after: function () {
                                _this.btn_disabled = false;
                            }
                        });
                },
                handleCurrentChange: function (val) {
                    if (null !== val) {
                        this.data_group.multipleSelection = val.id;
                    }
                },
                showColumns: function (tableName, comments) {
                    var _this = this;
                    console.log(543524, tableName);
                    location.href = $UC.ctxPath + "/to-column-list?id=" + _this.search_group.id + "&tableName=" + tableName + '&comments=' + comments;
                },
                openDialog: function () {
                    this.dialogFormVisible = true;
                },

                //-------------------- 抽屉里的内容
                dblclickTable(row, column, cell, event){
                    console.log('双击');
                    console.log(row);
                    var _this = this;
                    _this.drawer_query(_this.search_group.id,row.tableName);
                    _this.drawer_title = row.tableName+"("+row.comments+")";
                },
                lookTableInfo(row){
                    var _this = this;
                    _this.drawer_query(_this.search_group.id,row.tableName);
                    _this.drawer_title = row.tableName+"("+row.comments+")";
                },
                drawer_query: function (id,tableName) {
                    var _this = this;
                    //请求参数
                    var req ={
                        id :id,
                        tableName:tableName
                    };
                    $UU.http.get("/column-list",
                        req
                        , function (response) {
                        _this.tableColumnVisible = this;
                            //获取回调数据
                            _this.gridTableData = response.data.data.listColumn;
                            console.log(response.data);
                            // _this.data_group.list = response.data.data.listColumn;
                            // _this.data_group.comments=response.data.data.comments;
                            // _this.data_group.tableName=_this.search_group.tableName;
                            // _this.data_group.id=_this.search_group.id;
                        }, {
                            requestBody: true,
                            before: function () {
                                // _this.btn_disabled = true;
                            },
                            after: function () {
                                // _this.btn_disabled = false;
                            }
                        });
                },
            }
        });


    </script>


</th:block>
</html>
